<template>
	<view class="nav">
		<view class="qq">
			<image src="../../static/地图-地标.png" mode="" class="img"></image>
			<view class="quan">全国</view>
		</view>
		<view class="zx">
			<uni-section class="uni" title="自定义样式" subTitle="使用 bgColor 属性自定义背景色" type="line">
				<uni-search-bar placeholder="自定义背景色" bgColor="#EEEEEE" @confirm="search" />
			</uni-section>
		</view>
		<!-- 下拉框 -->
		<view class="drop-down">
			<view class="drop-down-li">排序</view>
			<view class="drop-down-li">品牌</view>
			<view class="drop-down-li">价格</view>
			<view class="drop-down-li">车型</view>
			<view class="drop-down-li">更多</view>
		</view>
		<view class="btn">
			<view class="btn-li">腾发自营</view>
			<view class="btn-li">车主自营</view>
			<view class="btn-li">限时特惠</view>
			<view class="btn-li">严选好车</view>
		</view>
		<!-- 二手车 -->
		<view class="top4">
			<view class="er">
				<view class="er1" v-for="item in ershou" key="index">
					<image class="im" :src="item.cover" mode=""></image>
					<p class="pp">{{item.carName}}</p>
					<text class="ts">{{item.ind}}</text>/<text>{{item.mileage}}万公里</text> <br />
					<span class="s1" style="color: red;">{{item.currentPrice}}万</span>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		er
	} from "../../utils/ajax.js"


	const ershou = reactive([])
	er().then(res => {
		console.log(res);
		ershou.push(...res.data.data.content)
	})
</script>

<style>
	.nav {
		position: relative;
	}

	.qq {
		position: relative;
		width: 200rpx;
		/* border: 1px solid; */
		left: 30rpx;
		top: 20rpx;
	}

	.img {
		top: 5rpx;
		width: 30rpx;
		height: 30rpx;
	}

	.quan {
		position: absolute;
		top: 0;
		left: 40rpx;
	}

	.uni {
		position: absolute;
		width: 550rpx;
		top: -17rpx;
		left: 150rpx;
	}


	.con-inp {
		width: 700rpx;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
	}

	.inp input {
		background-color: #F8F8F8;
		width: 550rpx;
		height: 80rpx;
		border-radius: 100rpx;
		padding: 0 100rpx;
		box-sizing: border-box;
	}

	.con-icon {
		font-size: 35rpx;
		height: 80rpx;
		width: 150rpx;
		padding: 10rpx 0;
		box-sizing: border-box;
		line-height: 40rpx;
	}

	.con-icon .icon {
		vertical-align: bottom;
	}

	.drop-down {
		position: relative;
		width: 700rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 40px;
	}

	.btn {
		position: relative;
		width: 700rpx;
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.btn .btn-li {
		padding: 10rpx 30rpx;
		background-color: #F5F7FE;
		border-radius: 30rpx;
		font-size: 20rpx;

	}

	.er1 {
		display: inline-block;
		width: 43.33333vw;
		height: 69.06667vw;
		background-color: #fff;
		border-radius: 1.86667vw;
		border: 1px solid #f5f7fe;
		margin-left: 10px;
	}

	.im {
		width: 45.33333vw;
		height: 33.86667vw;
		border-radius: 1.86667vw 1.86667vw 0 0;
	}

	.pp {
		width: 178px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		height: 7.2vw;
	}

	.ts {
		font-size: 12px;
	}
</style>
